<template>
  <el-button :icon="Edit" size="small" type="primary" @click="open"/>
  <el-dialog v-model="dialogTableVisible" title="修改用户课程" width="400px">
    <el-table :data="courseList" style="width: 100%"
              @selection-change="selectList">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="课程名称" prop="name" width="200px"/>
    </el-table>
    <div style="margin-top: 10px;margin-left: 200px">
      <el-button @click="addCourse">确定</el-button>
      <el-button @click="dialogTableVisible=false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import {list, updateUserCourse} from "@/api/course"
import {Edit} from "@element-plus/icons-vue";
import {ref} from "vue";
import {ElMessage} from "element-plus";

let courseList = ref([]);
let dialogTableVisible = ref(false);
let props = defineProps({
  id: {
    type: Int8Array
  }
})
let selects = ref([])
let open = () => {
  list(props.id).then(res => {
    courseList.value = res.data;
  })
  dialogTableVisible.value = true;
}
let addCourse = () => {
  let courseList = selects.value.toString();
  let id = props.id;
  updateUserCourse(id, courseList).then(res => {
    if (res.code = 200) {
      ElMessage.success("更改成功！")
      dialogTableVisible.value = false;
    }
    //TODO 刷新当前页面
    location.reload()
  })
}
let selectList = (ids) => {
  selects.value = [];
  ids.map(id => {
    selects.value.push(id.id)
  })
  console.log(selects.value)
}
</script>
